<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,shrink-to-fit=no"
    />
    <title>OOM when calling destroyChildren</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
      }

      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <button id="add">add 1000</button>
    <button id="remove all">remove all</button>
    <script
      src="../packages/g/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script
      src="../packages/g-canvas/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script
      src="../packages/g-components/dist/index.umd.min.js"
      type="application/javascript"
    ></script>
    <script src="./assets/gui.min.js" type="application/javascript"></script>
    <script>
      const { Circle, Canvas, Line, Group, runtime } = window.G;
      const { Arrow } = window.G.Components;
      const { Button } = window.GUI;

      // create a renderer
      const canvasRenderer = new window.G.Canvas2D.Renderer();

      // create a canvas
      const canvas = new Canvas({
        container: 'container',
        width: 600,
        height: 500,
        renderer: canvasRenderer,
      });

      let circles = [];
      document.getElementById('add').addEventListener('click', () => {
        for (let i = 0; i < 1000; i++) {
          // const g = new Group();
          // const circle = new Arrow({
          //   id: 'lineArrow',
          //   style: {
          //     body: new Line({
          //       style: {
          //         x1: Math.random() * 600,
          //         y1: Math.random() * 500,
          //         x2: Math.random() * 600,
          //         y2: Math.random() * 500,
          //       },
          //     }),
          //     startHead: true,
          //     stroke: '#1890FF',
          //     lineWidth: 2,
          //   },
          // });
          const circle = new Button({
            style: {
              text: 'button',
            },
          });

          // const circle = new Circle({
          //   style: {
          //     cx: Math.random() * 600,
          //     cy: Math.random() * 500,
          //     r: 10,
          //     fill: '#1890FF',
          //     stroke: '#F04864',
          //     lineWidth: 4,
          //   },
          // });

          // g.appendChild(circle);
          circles.push(circle);
          canvas.appendChild(circle);
        }
      });

      document.getElementById('remove all').addEventListener('click', () => {
        circles = [];
        canvas.destroyChildren();
        // canvas.destroy();
      });
    </script>
  </body>
</html>
